<%@ page import="com.example.demo_text.CourseDAO" %>
<%@ page import="com.example.demo_text.VideoDAO" %>
<%@ page import="com.example.demo_text.Video" %>
<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%
    String courseId = request.getParameter("course_id");
    String courseName = "";
    if (courseId != null && !courseId.isEmpty()) {
        courseName = CourseDAO.getCourseNameById(courseId);
    }

    // 获取错误提示
    String error = request.getParameter("error");

    // 获取该课程下的所有视频
    List<Video> videos = VideoDAO.getVideosByCourseId(courseId);
%>

<!DOCTYPE html>
<html>
<head>
    <title>章节管理</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Segoe UI', sans-serif;
            background: linear-gradient(135deg, #e0f7fa, #f3e5f5);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .card {
            background: white;
            width: 90%;
            max-width: 800px;
            padding: 30px 25px;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        h2 {
            text-align: center;
            margin-bottom: 20px;
            color: #374151;
        }

        p {
            text-align: center;
            color: #4b5563;
            margin-bottom: 20px;
        }

        .module-content {
            display: flex;
            gap: 20px;
        }

        .video-list {
            width: 40%;
        }

        .video-list ul {
            list-style: none;
            padding-left: 0;
        }

        .video-list li {
            padding: 10px 0;
            border-bottom: 1px solid #e5e7eb;
        }

        .video-list a {
            display: block;
            color: #374151;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .video-list a:hover {
            color: #3b82f6;
        }

        .video-player {
            width: 60%;
        }

        video {
            width: 100%;
            height: auto;
            border-radius: 8px;
            background-color: black;
        }

        .btn-upload {
            display: inline-block;
            margin-top: 20px;
            padding: 10px 20px;
            background-color: #3b82f6;
            color: white;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .btn-upload:hover {
            background-color: #2563eb;
        }
    </style>
</head>
<body>

<div class="card">

    <!-- 错误提示 -->
    <% if (error != null && !error.isEmpty()) { %>
    <p style="color:red; text-align:center; margin-bottom: 20px;"><%= error %></p>
    <% } %>

    <h2>章节管理</h2>
    <% if (!courseName.isEmpty()) { %>
    <p>当前课程名称：<%= courseName %></p>
    <% } else { %>
    <p>未找到课程信息或未指定课程 ID。</p>
    <% } %>

    <!-- 左右布局 -->
    <div class="module-content">
        <!-- 左侧：视频列表 -->
        <div class="video-list">
            <h3>已上传的视频</h3>
            <% if (videos != null && !videos.isEmpty()) { %>
            <ul>
                <% for (Video video : videos) { %>
                <li>
                    <a href="#" class="video-item" data-video-url="<%= video.getVideoUrl() %>">
                        <%= video.getChapterTitle() %>
                    </a>
                </li>
                <% } %>
            </ul>
            <% } else { %>
            <p>暂无视频资源。</p>
            <% } %>
        </div>

        <!-- 右侧：视频播放器 -->
        <div class="video-player">
            <h3>视频播放</h3>
            <video id="videoPlayer" controls width="100%" style="border-radius: 8px;">
                <source id="videoSource" src="" type="video/mp4">
                您的浏览器不支持 HTML5 视频。
            </video>
        </div>
    </div>

    <!-- 上传按钮 -->
    <div style="text-align: center;">
        <a href="upload_video.jsp?course_id=<%= courseId %>" class="btn-upload">上传新视频</a>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const videoItems = document.querySelectorAll('.video-item');
        const videoPlayer = document.getElementById('videoPlayer');
        const videoSource = document.getElementById('videoSource');

        videoItems.forEach(item => {
            item.addEventListener('click', function (e) {
                e.preventDefault();
                const url = item.getAttribute('data-video-url');
                videoSource.src = url;
                videoPlayer.load();  // 加载新的视频源
                videoPlayer.play();  // 自动播放
            });
        });
    });
</script>

</body>
</html>
